<template>
    <div>
        <el-form ref="form" :model="form" label-width="160px" :disabled="true">
            <el-row>
                <el-col :span="12">
                    <el-form-item :label="form.staffType == 1?'联系人':'托运人姓名'" prop="userName">
                        <el-input v-model="form.userName"  :disabled="true" />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="联系方式" prop="phone">
                        <el-input
                            v-model="form.phone"
                            autocomplete="off"
                            disabled
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                 <el-col :span="12">
                    <el-form-item label="密码" prop="passwd">
                        <el-input
                            v-model="form.passwd"
                            type="password"
                            autocomplete="new-password"
                            disabled
                        />
                    </el-form-item>
                </el-col>
                 <el-col :span="12" v-if="form.staffType == 1">
                    <el-form-item label="托运单位" prop="companyName">
                        <el-input
                            v-model="form.companyName"
                            disabled
                        />
                    </el-form-item>
                </el-col>

            </el-row>
            <el-row>
                 <el-col :span="12" v-if="form.staffType == 1">
                    <el-form-item label="法人代表名称" prop="legalName">
                        <el-input v-model="form.legalName"  :disabled="true"  />
                    </el-form-item>
                </el-col>
                <!--  v-if="isCompanyMode" -->
                <el-col :span="12" v-if="form.staffType == 1">
                    <el-form-item label="统一社会信用代码" prop="businessLicenseImgNumber">
                        <el-input
                            v-model="form.businessLicenseImgNumber"
                            disabled
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="简称码" prop="prefix">
                        <el-input
                            v-model="form.prefix"
                            disabled
                        />
                    </el-form-item>
                </el-col>
                 <el-col :span="12">
                    <el-form-item label="身份证号" prop="identificationNumber">
                        <el-input
                            v-model="form.identificationNumber"
                            disabled
                        />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <!-- 加入所属税务机关 -->
                <el-col :span="12">
                    <el-form-item label="所属主管税务机关" prop="myTaxOrgan" label-width="160px">
                        <el-input
                            v-model="form.myTaxOrgan"
                            disabled
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="税点(%)" prop="taxPoint">
                        <el-input v-model.number="form.taxPoint" placeholder="请输入税点" disabled  />
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="12">
                    <el-form-item label="通信地址" prop="areaList">
                        <el-cascader
                            v-model="form.areaList"
                            :options="parentData.areaOptions"
                            :props="{ value: 'countyCode', label: 'countyName', children: 'children' }"
                            disabled
                        />
                    </el-form-item>
                </el-col>
                <el-col :span="12">
                    <el-form-item label="详细地址" prop="address">
                        <el-input v-model="form.address" prop="address" disabled  />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row>
                <el-col :span="24">
                    <el-form-item label="上传证件">
                        <ImgUpload
                            :uploadConfig="{ lebal: '身份证正面照', prefix: 'identification', form: form, suffix: 'Img' }"
                            :parent-data="parentData"
                            :required="false"
                        />
                        <ImgUpload
                            :uploadConfig="{ lebal: '身份证背面照', prefix: 'identificationBack', form: form, suffix: 'Img' }"
                            :parent-data="parentData"
                            :required="false"
                        />
                        <ImgUpload
                            :uploadConfig="{ lebal: '手持身份证合照', prefix: 'identificationInhand', form: form, suffix: 'Img' }"
                            :parent-data="parentData"
                            :required="false"
                        />
                        <ImgUpload
                            v-if="form.staffType == 1"
                            :uploadConfig="{ lebal: '统一社会信用三证合一照片', prefix: 'businessLicense', form: form, suffix: 'Img' }"
                            :parent-data="parentData"
                            :required="false"
                        />
                    </el-form-item>
                </el-col>
            </el-row>

            <el-row style="line-height: 36px;">
                <el-col :span="20" :offset="2">
                    <div style="padding-bottom: 22px;">
                        <el-checkbox
                            v-model="form.isMonthlyClient"
                            label="是否为月结客户"
                            :checked="!!form.isMonthlyClient"
                            :false-label="0"
                            :true-label="1"
                            disabled
                        />
                        <el-checkbox
                            v-model="form.isIndependentCheckout"
                            label="是否独立核算"
                            :checked="!!form.isIndependentCheckout"
                            :false-label="0"
                            :true-label="1"
                            v-if="isCtms"
                            disabled
                        />
                        <el-checkbox
                            v-model="form.isEnsure"
                            label="是否需要发货保证金"
                            :checked="!!form.isEnsure"
                            :false-label="0"
                            :true-label="1"
                            v-if="isCtms"
                            disabled
                        />
                    </div>
                </el-col>
                <!-- <el-col v-if="form.isEnsure" :span="4">
                    <el-form-item prop="ensureFee">
                        <el-input v-model="form.ensureFee" placeholder="请输入保证金"  />
                    </el-form-item>
                </el-col> -->
            </el-row>
            <el-row v-if="form.isEnsure">
              <el-col :span="8">
                <el-form-item prop="ensureFee" label="发货保证金">
                  <el-input
                    v-model="form.ensureFee"
                    placeholder="请输入保证金"
                    disabled
                  >
                    <template slot="append">元</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>
        </el-form>
        <!-- <el-button type="primary" plain @click="funcSubmit('form')">提交</el-button> -->
    </div>
</template>
<script>
import {
    getShipperInfo,
    getShipmentInfo,
    updateShipperInfo,
} from '@/api/shipment'
import {
    validatePhone,
    validateIDNumber,
    validatePrefix,
} from '@/utils/validate.js'
import ImgUpload from '@/components/ImgUpload'
import { getRole } from '@/utils/getRole'
export default {
    name: 'shipperDetail',
    components: {
        ImgUpload,
    },
    props: {
        parentData: {
            type: Object,
            default() {
                return {
                    areaOptions: [],
                    goodsTypeList: [],
                    typeOptions: [],
                    vehicleDictList: [],
                    bankOptions: [],
                }
            },
        },
        mode: {
            type: String,
            default() {
                return ''
            },
        },
    },
    data() {
        return {
            isCtms: true, //默认显示  同城系统隐藏
            dialogVisible: false,
            dialogImageUrl: '',
            uploadUrl:
                this.BASE_API_URL + 'ntocc-tps-api/fileUpload',
            form: {
                staffType: '0', // 类型（入驻商）
                userName: '',
                phone: '',
                passwd: '',
                identificationNumber: '',
                companyName: '',
                businessLicenseImgNumber: '', // 信用代码
                prefix: '',
                taxPoint: '',
                areaList: [],
                address: '',
                identificationImg: '',
                identificationBackImg: '',
                identificationInhandImg: '',
                businessLicenseImg: '',
                isIndependentCheckout: 0,
                isMonthlyClient: 0,
                isEnsure: 0,
                ensureFee: 0,
            },
            // rules: {
            //     userName: [
            //         { required: true, message: '请输入姓名', trigger: 'blur' },
            //     ],
            //     phone: [
            //         {
            //             required: true,
            //             validator(rule, value, callback) {
            //                 validatePhone(value)
            //                     ? callback()
            //                     : callback(new Error('手机号格式有误'))
            //             },
            //             trigger: 'blur',
            //         },
            //     ],
            //     passwd: [
            //         { required: false, message: '请输入密码', trigger: 'blur' },
            //     ],
            //     identificationNumber: [
            //         {
            //             required: true,
            //             validator(rule, value, callback) {
            //                 validateIDNumber(value)
            //                     ? callback()
            //                     : callback(new Error('身份证号格式有误'))
            //             },
            //             trigger: 'blur',
            //         },
            //     ],
            //     companyName: [
            //         {
            //             required: true,
            //             message: '请输入公司名称',
            //             trigger: 'blur',
            //         },
            //     ],
            //     businessLicenseImgNumber: [
            //         {
            //             required: true,
            //             message: '请输入统一社会信用代码',
            //             trigger: 'blur',
            //         },
            //     ],
            //     prefix: [
            //         {
            //             required: true,
            //             validator(rule, value, callback) {
            //                 validatePrefix(value)
            //                     ? callback()
            //                     : callback(
            //                           new Error('请输入2-4位纯字母的入驻商简称')
            //                       )
            //             },
            //             trigger: 'blur',
            //         },
            //     ],
            //     taxPoint: [
            //         { required: false, message: '请输入税点', trigger: 'blur' },
            //     ],
            //     address: [
            //         {
            //             required: true,
            //             message: '请输入详细地址',
            //             trigger: 'blur',
            //         },
            //     ],
            //     areaList: [
            //         {
            //             required: true,
            //             message: '请选择所在区域',
            //             trigger: 'blur',
            //         },
            //     ],
            //     identificationImg: [
            //         {
            //             required: true,
            //             message: '请上传身份证正面照',
            //             trigger: 'blur',
            //         },
            //     ],
            //     identificationBackImg: [
            //         {
            //             required: true,
            //             message: '请上传身份证背面照',
            //             trigger: 'blur',
            //         },
            //     ],
            //     identificationInhandImg: [
            //         {
            //             required: true,
            //             message: '请上传手持身份证合照',
            //             trigger: 'blur',
            //         },
            //     ],
            //     businessLicenseImg: [
            //         {
            //             required: true,
            //             message: '请上传统一社会信用三证合一照片',
            //             trigger: 'blur',
            //         },
            //     ],
            //     ensureFee: [
            //         {
            //             required: true,
            //             message: '请输入保证金',
            //             trigger: 'blur',
            //         },
            //     ],
            // },
        }
    },
    computed: {
        isCompanyMode() {
            return this.mode === 'company'
        },
    },
    created() {
        let isCtmsShow = getRole() //获取登录用户登录的是否是同城系统
        this.isCtms = !isCtmsShow
    },
    methods: {
        // 获取承运商详情
        getShipperDetail(code) {
            getShipperInfo(code).then((response) => {
                this.form = response.data
            })
        },
        handleImgSuccess(type, res, file) {
            this.form[`${type}Img`] = res.data
            this.$message({ message: res.msg, type: 'success' })
        },
        // beforeAvatarUpload(file) {
        //     const isJPG =
        //         file.type === 'image/jpeg' ||
        //         file.type === 'image/bmp' ||
        //         file.type === 'image/png'
        //     const isLtnM = file.size / 1024 / 1024 < 10
        //     if (!isJPG) {
        //         this.$message.error('上传图片只能是 JPG,BMP,PNG 格式!')
        //     }
        //     if (!isLtnM) {
        //         this.$message.error('上传图片大小不能超过 10MB!')
        //     }
        //     return isJPG && isLtnM
        // },
        // funcSubmit(formName) {
        //     this.$refs[formName].validate((valid) => {
        //         if (valid) {
        //             const rLoading = this.openLoading();
        //             this.form.staffType = this.isCompanyMode ? '1' : '0'
        //             updateShipperInfo(this.form).then((response) => {
        //                 rLoading.close();
        //                 this.$message({
        //                     message: response.msg,
        //                     type: 'success',
        //                 })
        //                 this.$router.go(-1)
        //             })
        //         } else {
        //             this.$message.error('必选项不能为空!')
        //         }
        //     })
        // },
    },
}
</script>
<style scoped>
.custom-grid {
    display: inline-block;
    font-size: 14px;
    color: #8c939d;
    margin-right: 20px;
}
.avatar-uploader /deep/.el-upload {
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.avatar-uploader-icon {
    box-sizing: border-box;
    font-size: 28px;
    color: #8c939d;
    width: 148px;
    height: 148px;
    line-height: 148px;
    text-align: center;
    border-width: 1px;
    border-style: dashed;
    border-color: #c0ccda;
}
.avatar-uploader-icon:hover {
    border-color: #409eff;
}
.avatar {
    width: 148px;
    height: 148px;
    display: block;
}
.el-cascader {
    width: 100%;
}
</style>
